<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百慧wms仓库</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
    <!--
        昵称,密码,头像
    -->
    <div class="layui-container" style="margin-top: 10px;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <form class="layui-form layui-form-pane" lay-filter="userInfo">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="userNick" required  lay-verify="required" placeholder="用户昵称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="newPassword" placeholder="新密码" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像修改</label>
                        <div class="layui-input-block">
                            <div class="layui-upload-drag" id="avatar">
                                <i class="layui-icon"></i>
                                <p>点击上传，或将图片拖拽到此处</p>
                                <div class="layui-hide" id="uploadDemoView">
                                    <hr>
                                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="avatar">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="edit">提交修改</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="../layui/layui.js"></script>
    <script>

        layui.use(['layer','jquery','upload','form'],function () {
            let upload = layui.upload;
            let layer = layui.layer;
            let $ = layui.jquery;
            let form = layui.form;

            //获取当前登录用户信息,回显修改页面
            let cs = document.cookie;
            let ps = cs.split(";");
            let obj={};
            for (let i=0;i<ps.length;i++){
                let pss = ps[i].split("=");
                obj[pss[0].trim()]=pss[1].trim();
            }
            $.getJSON("/getUserDetail",{userId:obj.userId},function (d) {
                if(d.code===0){
                    //数据回显
                    form.val('userInfo',{
                        'userNick':d.obj.userNick,
                        'avatar':d.obj.avatar
                    });
                    //图片展示
                    let serverUrl="http://127.0.0.1:8080/";
                    $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', serverUrl+d.obj.avatar);
                }else {
                    layer.msg(d.msg);
                }
            });

            //拖拽上传
            upload.render({
                elem: '#avatar',
                url: '/uploadFile', //文件上传地址
                done: function(res){
                    if(res.code===0){
                        //成功之后展示
                        $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.obj);
                        //将成功之后的数据隐藏在表单中
                        $('input[name="avatar"]').val(res.obj);
                    }else {
                        //失败提示消息
                        layer.msg(d.msg);
                    }

                }
            });

            //提交数据
            form.on('submit(edit)',function (data) {
                data.field.userId=obj.userId;
                $.ajax({
                    url:"/updateUser",
                    method:"post",
                    data:JSON.stringify(data.field),
                    contentType:"application/json",
                    success:function (d){
                        console.log(d);
                        //关闭弹出层
                        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        if(d.code!=0){
                            layer.msg(d.msg);
                        }
                    }
                });
                return false;
            })
        });

    </script>
</body>
</html>